
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <title>Natural Variation Haplotype Map App</title>
    <link rel="stylesheet" href="./lib/jquery-ui/theme/base/jquery.ui.all.css">
    <script type="text/javascript" src="./lib/d3/d3.js?2.3.0"></script>
    <script src='./lib/d3/d3.layout.js?2.3.0' type='text/javascript'> </script>
    <script type="text/javascript" src="./lib/jquery/jquery.js"></script>
    <script type="text/javascript" src="./lib/jquery/jquery.blockUI.js"></script>
    <script type="text/javascript" src="./lib/jquery/jquery.qtip.js"></script>
    <script type="text/javascript" src="./lib/jquery/jquery.combobox.js"></script>
    <script type="text/javascript" src="./js/communicate.js"></script>
    <script type="text/javascript" src="./js/data.js"></script> 
    <script type="text/javascript" src="./js/hap_jqd3.js"></script> 
    <script type="text/javascript" src="./lib/jquery-ui/jquery.ui.core.js"></script>
    <script type="text/javascript" src="./lib/jquery-ui/jquery.ui.widget.js"></script>
    <script type="text/javascript" src="./lib/jquery-ui/jquery.ui.tabs.js"></script>
    <script type="text/javascript" src="./lib/jquery-ui/jquery.ui.mouse.js"></script>
    <script type="text/javascript" src="./lib/jquery-ui/jquery.ui.slider.js"></script>
     <script type="text/javascript" src="./lib/jquery-ui/jquery.ui.dialog.js"></script>
    <link rel="stylesheet" href="./lib/jquery-ui/demos.css">
<!--    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
        google.load('visualization', '1', {packages: ['orgchart', 'table']});
    </script>
  -->
    <link rel="stylesheet" type="text/css" href="./css/style.css"/>
    <link rel="stylesheet" type="text/css" href="./css/syntax.css"/>
    <link href='./css/tree.css' rel='stylesheet' type='text/css' />
    <script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-26876458-1']);
  _gaq.push(['_trackPageview']);
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>
  </head>
  <body>
<style>

* {
margin: 0;
}

html, body {
height: 100%;
}

.tooltip {
	display:none;
	background:transparent url(/tools/img/tooltip/black_arrow.png);
	font-size:12px;
	height:70px;
	width:160px;
	padding:25px;
	color:#fff;	
}

.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
width: 100%;
margin: 0 auto -4em;
}

.menu {
    background-color: lightblue;
    top: 60px;
    width:100%;
    height:30px;
    z-index:10000;
}

.searchform {
    background-color: lightblue;
    top: 60px;
    width:100%;
    height:70px;
    z-index:10000;
}

.strain_detail{
	top:100px;
	left:5px;
	width: auto;
	height: auto;
	background-color: lightblue;
}

div.img
{
  margin: 2px;
  border: 1px solid #0000ff;
  height: auto;
  width: 120px;
  float: left;
  text-align: center;
}	
div.img img
{
  display: inline;
  margin: 3px;
  border: 1px solid #ffffff;
}
div.img a:hover img {border: 1px solid #0000ff;}
div.desc
{
  text-align: center;
  font-weight: normal;
  width: 120px;
  margin: 2px;
}

.iTitle{
	top:5px;
	left:5px;
	font-size:20px;
	font-style:normal;
}
.topbar{
        top:40px;
}

.button {
    padding: 5px 10px;
    display: inline;
    background-color: #0099FF;
    border: none;
    color: #fff;
    cursor: pointer;
    font-weight: bold;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    text-shadow: 1px 1px #666;
    }
.button:hover {
    background-position: 0 -48px;
    }
.button:active {
    background-position: 0 top;
    position: relative;
    top: 1px;
    padding: 6px 10px 4px;
    }
.footer, .push{
	height: 2em;
}

.bottomcontact
{
    position:relative;
    bottom:-200px;
    left:0px;	
}

</style>
    <div class="wrapper" >
        <div class="topbar" align="right">
          <a href="http://www.yeastgenome.org/">SGD</a>
          <a href="http://www.sciencemag.org/content/331/6020/1015" target='blank'>Systems Genetics</a>
	  <a href="http://code.google.com/p/systemsgenetics-haplotype" target='blank'>Manual/Source</a>
          <a href="http://www.systemsbiology.org/scientists_and_research/faculty_groups/Dudley_Group target='blank'">Dudley Group</a>
        </div>
<div class = 'iTitle'>Saccharomyces cerevisiae <i>natural variation</i> hapapp</div>
<div id="menu0" style="" class="menu">
&nbsp;<b>Cross</b>&nbsp;<select size="1" id="region_type_selector" onchange="updateCross(this.value); return false;">
    <option value="YCR6">Soil_IL:Beer_Ireland</option>
    <option value="YCR5">Sake_Japan:WhiteTecc_Ethiopia</option>
   <!-- <option value="YCR5">Chocolate_SoilRedCanyon</option>-->
    </select>
&nbsp;<label for="chromosome"><b>Chr</b></label> <select input id="chromosome" size="1">
<option value="01">1</option>
    <option value="02">2</option>
    <option value="03">3</option>
    <option value="04">4</option>
    <option value="05">5</option>
    <option value="06">6</option>
    <option value="07">7</option>
    <option value="08">8</option>
    <option value="09">9</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
    <option value="13">13</option>
    <option value="14">14</option>
    <option value="15">15</option>
    <option value="16">16</option>
    <option value="mt">mt</option>
    <option value="ALL">ALL</option>
</select>
&nbsp;<label for="markers"><b>Markers</b></label> <input id="markers" type="text" size="60" value="All" >
&nbsp;<b>Layout</b>&nbsp;<select size="1" id="marker_layout" onchange="updateLayout(this.value);return false;">
    <option value="Bin">Bin</option>
    <option selected value="Physical">Physical</option>
    </select>
</div> <!-- end of menu0-->
<div id="menu1" class="searchform">
    &nbsp;<label id="progenyrblabel" for="progenyrb"><b>Progeny Signature</b></label><input type="radio" name="radiogroup" id="progenyrb" value="progenyrb"  onclick="updateSearchForm();">&nbsp;
    &nbsp;<label for="parentrb"><b>Parent</b></label><input type="radio" name="radiogroup" id="parentrb" value="parentrb" checked="checked" onclick="updateSearchForm();">&nbsp;


    <div id="progenyform">
&nbsp;<b>Progeny Signature</b>&nbsp;<select id="signature_list" ></select>
&nbsp;<b>List</b>&nbsp;<input type="text" size="100" id="progeny_list" />
   </div>
    <div id="parentform">
        &nbsp;<label for="parentselect"><b>Parent: </b></label><select input id="parentselect" value="A">
        <option value="A">A</option>
        <option value="B">B</option>
        </select>
        &nbsp;<label for="parentchr"><b>Chr</b></label> <select input id="parentchr" size="1">
<option value="01">1</option>
    <option value="02">2</option>
    <option value="03">3</option>
    <option value="04">4</option>
    <option value="05">5</option>
    <option value="06">6</option>
    <option value="07">7</option>
    <option value="08">8</option>
    <option value="09">9</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
    <option value="13">13</option>
    <option value="14">14</option>
    <option value="15">15</option>
    <option value="16">16</option>
    <option value="mt">mt</option>
</select>
&nbsp;<label for="parentmarker"><b>Marker</b></label> <input id="parentmarker" type="text" size="25" >
   &nbsp;<label for="pp_list"><b>Progenies</b><input type="text" size="100" id="pp_list" value="" readonly="readonly" />
    </div>

    &nbsp;&nbsp;<button class='button' align="right" onclick='JavaScript:hapGo()'>Go</button>
</div> <!-- end of menu1-->

<div class="hmcontainer" style="width:7000px">
<div id="tabs" style="overflow:scroll">
	<ul>
	<!--	<li><a href="#tabs-1">References and Relationships</a></li> -->
		<li><a href="#tabs-2">Haplotype Calls</a></li>
		<li><a href="#tabs-3">Strains</a></li>
	</ul>
<!--	<div id="tabs-1">
		<div class='strain_detail' id='parent_detail_div'><b>Parent Details</b><br>Soil,IL-01, NV 17<br>SPS2:EGFP:kanMX4 HO ::HYG<br>Soil, Cahokia, IL, USA (2003)<br><br>BeerCLIB382, NV 39<br>SPS2:EGFP:natMX4 HO::dsdMX4<br>Ireland, brewery, super-attenuated beer, pre-1952</div>
</div> -->
	<div id="tabs-2" >
		<div class='strain_detail' id='parent_detail_div_YCR6'><b>Parent Details</b><br>Soil,IL-01, NV 17<br>SPS2:EGFP:kanMX4 HO ::HYG<br>Soil, Cahokia, IL, USA (2003)<br><br>Beer, CLIB382, NV 39<br>SPS2:EGFP:natMX4 HO::dsdMX4<br>Ireland, brewery, super-attenuated beer, pre-1952<br></div>
	<div class='strain_detail' id='parent_detail_div_YCR5'><b>Parent Details</b><br>UC5, Sake, NV 13<br>SPS2:EGFP:kanMX4 HO ::HYG<br>Sene Sake, Kurashi, Japan (pre-1974)<br><br>DBVPG1853, White Tecc, NV 29<br>SPS2:EGFP:natMX4 HO::HYG<br>White Tecc, Ethiopia<br></div>	
	<br><b><p><font size="+1" color="#2B60DE">Blue ParentA</font>
<font size="+1" color="#306EFF"> Inferred</font>&nbsp;<font size="+1"  color="#E41B17">Red ParentB</font> <font size="+1"  color="red">Inferred</font> <br>
<font size="+1" color="grey">Grey Lowreads</font> <font size="+1" color="green">Green Ambiguous</font><br><font size="+1" color="purple">Purple Recombination</font> <font size="+1" color="#9E7BFF">Inferred</font> </p></b>	
	<div id="hapmarkers"></div><div id="hapcalls"></div>&nbsp;&nbsp;<button class='button' align="right" onclick='JavaScript:exportData()'>Export</button><br><br><div id="slider-range"></div><div id="gbrowse-input"></div>
	</div>
	<div id="tabs-3" style="overflow:scroll">
                <div id="denddiv"></div>
        </div>
</div>
<!-- end of tabs -->
<iframe id="frame" height=0 width=0></iframe>
<br>
Conditions&nbsp;<select size="1" id="pheno_selector" size='11' onchange="updatePheno(this.value);return false;">
    <option value="YPD">YPD</option>
    <option value="RAP">YPD+Rapamycin</option>
    <option value="SD">MinMedia-SD</option>
    <option value="10AT">MinMedia_10mM 3-aminotrizol</option>
    <option value="25AT">MinMedia_25mM 3-aminotrizol</option>
    </select>
<br><b>Growth Images for Soil and Beer: Days 1, 2, 3, 4, 5</b><br>
        <div class="img" id="ypgimgcontainer"><a target="_blank" href="/yeastImage/colonyPages/YPG993A/Day1/YPD.jpg"><img src="/yeastImage/colonyPages/YPG993A/Day1/YPD.jpg" alt="day1ypg" width="110" height="90" /></a>
 <div class="desc">stats</div></div>
<div class="img"><a target="_blank" href="/yeastImage/colonyPages/YPG993A/Day2/YPD.jpg"><img src="/yeastImage/colonyPages/YPG993A/Day2/YPD.jpg" alt="day2ypg" width="110" height="90" /></a><div class="desc">stats</div></div>
<div class="img">
<a target="_blank" href="/yeastImage/colonyPages/YPG993A/Day3/YPD.jpg"><img src="/yeastImage/colonyPages/YPG993A/Day3/YPD.jpg" alt="day3ypg" width="110" height="90" /></a><div class="desc">stats</div></div> 
<div class="img"><a target="_blank" href="/yeastImage/colonyPages/YPG993A/Day4/YPD.jpg"><img src="/yeastImage/colonyPages/YPG993A/Day4/YPD.jpg" alt="day4ypg" width="110" height="90" /></a><div class="desc">stats</div></div> 
<div class="img"><a target="_blank" href="/yeastImage/colonyPages/YPG993A/Day5/YPD.jpg"><img src="/yeastImage/colonyPages/YPG993A/Day5/YPD.jpg" alt="day5ypg" width="110" height="90" /></a><div class="desc">stats</div></div>

<!-- end of image -->
<br>
</div> <!-- end of demo -->

<div class="push"></div>
</div> <!-- end of content -->
</div>
<div class="bottomcontact"><p>Copyright &copy; 2011 <a href="http://www.systemsbiology.org/scientists_and_research/faculty_groups/Dudley_Group">Dudley Group[at]ISB</a><a href="mailto:adudley@systemsbiology.org">&nbsp;&nbsp;Contact us</a></p></div>
    </div>

  </body>
</html>

